<template>
  <uni-popup background-color="#fff" ref="conversionPop" @change="popChange">
    <view class="input-pop">
      <view class="header">
        <text>折算</text>
        <uni-icons class="close-icon" @click="closePop" type="closeempty" size="40rpx" color="#CCCCCC" />
      </view>
      <view class="conent-wrap">
        <view class="main">
          <view class="items">
            <view class="label" @click="viewInfo()">短倒卸货地<uni-icons class="close-icon" type="info-filled" size="36rpx"
                color="#333" /></view>
            <view class="select-wrap" :style="{
                color: conversion.purchaseCompanyName ? '#333' : '#808080'
              }" @click="chooseUnloadingLocation">
              {{
              conversion.purchaseCompanyName
              ? conversion.purchaseCompanyName
              : '请选择短倒卸货地'
              }}
            </view>
          </view>
          <view class="items full">
            <view class="label">铁路运费</view>
            <input type="digit" v-model="conversion.railwayFreight" placeholder="请输入铁路运费" />
          </view>
          <view class="items full">
            <view class="label">标准热值</view>
            <input type="digit" v-model="conversion.standardCalorificValue" placeholder="请输入标准热值" />
          </view>
        </view>
        <view class="footer">
          <button class="cancel" plain @click="resetInput()">重置</button>
          <button plain type="primary" @click="confirmConversion()">确认</button>
        </view>
        <scroll-view class="scroll-view" scroll-y="true" v-if="chooseLocationFlag">
          <view class="scroll-main">
            <view :key="index" class="scroll-view-item" @click="locationClickItem(item)"
              :class="{ 'active-item': item.checked }" v-for="(item, index) in locationList">
              <view>{{ item.purchaseCompanyName }}</view>
              <view class="checked-icon" v-if="item.checked">√</view>
            </view>
          </view>
          <view class="scroll-footer">
            <button class="cancel" plain size="mini" @click="cancleLocation">
              取消
            </button>
            <button plain size="mini" type="primary" @click="confirmLocation">
              确定
            </button>
          </view>
        </scroll-view>
      </view>
    </view>
  </uni-popup>
</template>
<script>
  import { toast } from '@/utils/common';
  import { getAllList } from '@/api/colliery.js';
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      async show(flag) {
        if (flag) {
          await this.getAllListFn();
          this.resetInput();
          this.$refs.conversionPop?.open('bottom');
          return;
        }
        this.$refs.conversionPop?.close();
      }
    },
    data() {
      return {
        chooseLocationFlag: false,
        locationList: [],
        conversion: {
          purchaseCompanyName: undefined,
          railwayFreight: undefined,
          standardCalorificValue: undefined
        }
      };
    },
    methods: {
      viewInfo() {
        toast('短倒卸货地筛选：卸货地采购企业，影响短倒运费展示及相关折算。')
      },
      popChange(data) {
        this.$emit('openChange', {
          key: 'isOpenConversion',
          show: data.show
        });
      },
      closePop() {
        this.$refs.conversionPop?.close();
      },
      resetInput() {
        this.conversion = {
          purchaseCompanyName: undefined,
          railwayFreight: undefined,
          standardCalorificValue: undefined
        };
        const purchaseCompany = this.locationList.find(e => e.purchaseCompanyId === 87)
        this.conversion.purchaseCompanyName = purchaseCompany?.purchaseCompanyName
        this.setCheckedForLocationList(purchaseCompany?.id)
      },
      chooseUnloadingLocation() {
        if (this.locationList.length == 0) {
          toast('短倒卸货地暂时为空');
          return;
        }
        this.chooseLocationFlag = true;
      },
      locationClickItem(item) {
        this.conversion.purchaseCompanyName = item.purchaseCompanyName
        this.setCheckedForLocationList(item.id)
      },
      setCheckedForLocationList(id) {
        this.locationList.forEach(e => {
          if (id === e.id) {
            e.checked = true
          } else {
            e.checked = false
          }
        })
      },
      cancleLocation() {
        this.chooseLocationFlag = false
      },
      confirmLocation() {
        this.chooseLocationFlag = false
      },
      confirmConversion() {
        if (this.conversion.railwayFreight > 999999.99) {
          toast('铁路运费长度不能超过999999.99');
          return;
        }
        if (this.conversion.standardCalorificValue > 999999) {
          toast('热值长度不能超过999999');
          return;
        }
        this.$emit('loadTable', this.conversion);
        this.$refs.conversionPop?.close();
      },
      async getAllListFn() {
        const res = await getAllList();
        if (res.code === 0) {
          this.locationList = res?.data || [];
          this.locationList = this.setListsChecked(this.locationList)
        } else {
          toast(res.msg);
        }
      },
      setListsChecked(list) {
        return list.map((e) => {
          e.checked = false;
          return e;
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .input-pop {
    display: flex;
    flex-direction: column;
    max-height: 80vh;

    .conent-wrap {
      display: flex;
      flex-direction: column;
      position: relative;
      max-height: 80vh;
    }

    .header {
      position: relative;
      padding: 12px 20px;
      text-align: center;
      border-bottom: 1px solid #eaeaea;

      .close-icon {
        position: absolute;
        right: 20px;
      }

      text {
        font-size: 15px;
        font-weight: bold;
      }
    }

    .main {
      padding: 20px 20px 0 20px;
      flex: 1;
      height: 0;
      overflow-y: auto;
    }

    .footer {
      padding: 12px 20px 0 20px;
      display: flex;
      justify-content: space-between;
    }

    button {
      width: 45%;
      margin-top: 10px;
      height: 40px !important;
      font-size: 16px !important;
      line-height: 40px !important;
    }

    button.cancel {
      border: 0 !important;
      color: #666666 !important;
      background-color: #eeeff2 !important;
    }
  }

  .items {
    margin-bottom: 10px;

    .label {
      width: 107px;
      margin-bottom: 4px;

      >text {
        color: red;
      }
    }

    input {
      flex: 1;
      height: 40px;
      color: #999;
      line-height: 40px;
      border-radius: 4px;
      padding: 5rpx 10rpx;
      border: 1px solid #e5e5e5;
    }

    .address-box {
      display: flex;
      flex: 1;

      button {
        width: 36%;
        margin-left: 10px;
      }
    }

    button {
      margin-top: 0 !important;
    }
  }

  .scroll-view {
    position: absolute;
    padding: 10px 20px;
    width: 100%;
    height: 100%;
    z-index: 9;
    top: 0;
    background-color: #fff;

    .scroll-view-item+.scroll-view-item {
      margin-top: 6px;
    }

    .scroll-view-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 4px;
      background-color: #f2f6fc;

      .checked-icon {
        font-size: 14px;
        font-weight: bold;
      }
    }

    .scroll-main {
      height: 220px;
      overflow-y: auto;
    }

    .scroll-footer {
      display: flex;
      justify-content: space-between;
    }
  }

  .select-wrap {
    flex: 1;
    height: 40px;
    padding: 0 5px;
    color: #808080;
    line-height: 40px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .active-item {
    color: #fff !important;
    background-color: #409eff !important;
  }
</style>